<template>
    <twoCom></twoCom>
    <br>
    <div class="chart" ref="chart"></div>
</template>

<script setup>
import twoCom from './two.vue';
import {ref,onMounted} from'vue';
import * as echarts from 'echarts';
let chart = ref();
let data = {
    "nodes": [
        {
            "name": "特定业务单位无法录入"
        },
        {
            "name": "填/选功能不完善"
        },
        {
            "name": "填列了信息但未能显示"
        },
        {
            "name": "品目/信息维护"
        },
        {
            "name": "系统设计维护"
        },
        {
            "name": "票面不符合记账系统"
        },
        {
            "name": "数据同步问题"
        },
        {
            "name": "票面与传统发票差异大"
        },
        {
            "name": "记账系统无法读取"
        },
        {
            "name": "如何获取销售方信息"
        },
        {
            "name": "特定业务管理要求与纳税人操作习惯有冲突"
        },
        {
            "name": "政策法规修订"
        },
        {
            "name": "非必填项规定不明确"
        },
        {
            "name": "政策文件规定不了解"
        },
        {
            "name": "关键信息为非必填项"
        },
        {
            "name": "操作指引不明确"
        },
        {
            "name": "企业需求研究"
        },
        {
            "name": "传播宣传辅导"
        },
        {
            "name": "系统查询不到"
        },
        {
            "name": "无法选择特定项目信息"
        },
        {
            "name": "票面信息不全"
        },
        {
            "name": "不同平台查询不一致"
        }
    ],
    "links": [
        {
            "id": 23,
            "source": "票面信息不全",
            "target": "如何获取销售方信息",
            "value": 1.0,
            "questionId": "1"
        },
        {
            "id": 24,
            "source": "票面信息不全",
            "target": "关键信息为非必填项",
            "value": 1.0,
            "questionId": "1"
        },
        {
            "id": 25,
            "source": "票面信息不全",
            "target": "票面与传统发票差异大",
            "value": 1.0,
            "questionId": "1"
        },
        {
            "id": 26,
            "source": "票面信息不全",
            "target": "填列了信息但未能显示",
            "value": 1.0,
            "questionId": "1"
        },
        {
            "id": 27,
            "source": "品目/信息维护",
            "target": "特定业务单位无法录入",
            "value": 1.0,
            "questionId": "1"
        },
        {
            "id": 28,
            "source": "品目/信息维护",
            "target": "无法选择特定项目信息",
            "value": 1.0,
            "questionId": "1"
        },
        {
            "id": 29,
            "source": "系统查询不到",
            "target": "填列了信息但未能显示",
            "value": 1.0,
            "questionId": "1"
        },
        {
            "id": 30,
            "source": "系统查询不到",
            "target": "不同平台查询不一致",
            "value": 1.0,
            "questionId": "1"
        },
        {
            "id": 31,
            "source": "记账系统无法读取",
            "target": "票面不符合记账系统",
            "value": 1.0,
            "questionId": "1"
        },
        {
            "id": 32,
            "source": "填列了信息但未能显示",
            "target": "数据同步问题",
            "value": 1.0,
            "questionId": "1"
        },
        {
            "id": 33,
            "source": "填列了信息但未能显示",
            "target": "填/选功能不完善",
            "value": 1.0,
            "questionId": "1"
        },
        {
            "id": 34,
            "source": "票面不符合记账系统",
            "target": "特定业务管理要求与纳税人操作习惯有冲突",
            "value": 1.0,
            "questionId": "1"
        },
        {
            "id": 35,
            "source": "特定业务单位无法录入",
            "target": "特定业务管理要求与纳税人操作习惯有冲突",
            "value": 1.0,
            "questionId": "1"
        },
        {
            "id": 36,
            "source": "无法选择特定项目信息",
            "target": "填/选功能不完善",
            "value": 1.0,
            "questionId": "1"
        },
        {
            "id": 37,
            "source": "不同平台查询不一致",
            "target": "数据同步问题",
            "value": 1.0,
            "questionId": "1"
        },
        {
            "id": 38,
            "source": "如何获取销售方信息",
            "target": "操作指引不明确",
            "value": 1.0,
            "questionId": "1"
        },
        {
            "id": 39,
            "source": "关键信息为非必填项",
            "target": "操作指引不明确",
            "value": 0.5,
            "questionId": "1"
        },
        {
            "id": 40,
            "source": "关键信息为非必填项",
            "target": "非必填项规定不明确",
            "value": 0.5,
            "questionId": "1"
        },
        {
            "id": 41,
            "source": "票面与传统发票差异大",
            "target": "政策文件规定不了解",
            "value": 1.0,
            "questionId": "1"
        },
        {
            "id": 42,
            "source": "特定业务管理要求与纳税人操作习惯有冲突",
            "target": "企业需求研究",
            "value": 2.0,
            "questionId": "1"
        },
        {
            "id": 43,
            "source": "数据同步问题",
            "target": "系统设计维护",
            "value": 2.0,
            "questionId": "1"
        },
        {
            "id": 44,
            "source": "填/选功能不完善",
            "target": "系统设计维护",
            "value": 2.0,
            "questionId": "1"
        },
        {
            "id": 45,
            "source": "操作指引不明确",
            "target": "系统设计维护",
            "value": 0.75,
            "questionId": "1"
        },
        {
            "id": 46,
            "source": "操作指引不明确",
            "target": "传播宣传辅导",
            "value": 0.75,
            "questionId": "1"
        },
        {
            "id": 47,
            "source": "政策文件规定不了解",
            "target": "传播宣传辅导",
            "value": 1.0,
            "questionId": "1"
        },
        {
            "id": 48,
            "source": "非必填项规定不明确",
            "target": "政策法规修订",
            "value": 0.5,
            "questionId": "1"
        }
    ]
}

const dg = (name) => {
    data.links.map((v) => {
        if (v.source == name) {
            v['gx'] = 1;
            dg(v.target)
        }
    })
}

const dg2 = (name1, name2) => {
    data.links.map((v) => {
        if (v.target == name1) {
            v['gx'] = 1;
            dg2(v.source, v.target);
        }
    })
}

const dg3 = (name1) => {
    data.links.map((v) => {
        if (v.target == name1) {
            v['gx'] = 1;
            dg3(v.source);
        }
    })
}

const initChart = () => {
    let chartDom = chart.value;
    let myChart = echarts.init(chartDom);
    myChart.showLoading();


    let level_last = []
    data.links.map((link) => {
        let link_ = data.links.filter((f) => f.source == link.target)[0];
        if (!link_) {
            level_last.push(link);
        }
    })
    // level 最低层级 label右对齐向左延申
    data.nodes.map((node) => {
        let is_ = level_last.filter((v) => v.target == node.name)[0];
        if (is_) {
            node['label'] = {
                position: "right",
                width: 16 * (6 + 1),
                overflow: 'truncate',
                ellipsis: '...'
            }
        }
        node['itemStyle'] = {
            opacity: .2
        }
    })

    let options = {
        backgroundColor:"#022164",
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove',
            backgroundColor: '#001764',
            textStyle: {
                color: '#fff',
            },
        },
        title: [
            {
                text: '问题类型',
                left: 37,
                top: 30,
                textStyle: {
                    color: '#75ADFB',
                    fontSize: 24
                }
            },
            {
                text: '具体表现',
                left: '30%',
                top: 30,
                textStyle: {
                    color: '#75ADFB',
                    fontSize: 24
                }
            },
            {
                text: '原因分析',
                left: '58%',
                top: 30,
                textStyle: {
                    color: '#75ADFB',
                    fontSize: 24
                }
            },
            {
                text: '深层原因',
                right: '5%',
                top: 30,
                textStyle: {
                    color: '#75ADFB',
                    fontSize: 24
                }
            }
        ],
        series: [
            {
                type: 'sankey',
                data: data.nodes,
                links: data.links,
                draggable: false,
                left: 37,
                right: 37 + 16 * 6 + 10,
                top: 85,
                bottom: 30,
                label: {
                    show: true,
                    position: "right",
                    color: "#fff",
                    fontSize: 16,
                    width: 16 * (10 + 1),
                    overflow: 'truncate',
                    ellipsis: '...'
                },
                levels: [
                    {
                        depth: 0,
                        lineStyle: {
                            color: 'source',
                            opacity: 0.4
                        }
                    },
                    {
                        depth: 1,
                        lineStyle: {
                            color: 'source',
                            opacity: 0.4
                        }
                    },
                    {
                        depth: 2,
                        lineStyle: {
                            color: 'source',
                            opacity: 0.4
                        }
                    },
                    {
                        depth: 3,
                        lineStyle: {
                            color: 'source',
                            opacity: 0.4
                        }
                    },

                    {
                        depth: 4,
                        lineStyle: {
                            color: 'source',
                            opacity: 0.4
                        }
                    }
                ],
                lineStyle: {
                    curveness: 0.5
                }
            }
        ]
    }
    myChart.setOption(options);

    myChart.off("mouseover");
    myChart.on('mouseover', (eventParam) => {
        data.links.forEach((link) => {
            link.gx = 0;
            link['lineStyle'] = {};
        })
        let activeNode = [];
        if (eventParam.dataType == "node") {
            let name1 = eventParam.data.id ? eventParam.data.id : eventParam.data.name;  //这里可能会变化
            let items = data.links.filter((v) => v.target == name1);
            if (items.length <= 0) {
                items = data.links.filter((v) => v.source == name1)
            }
            items.map((item) => {
                item['gx'] = 1;
                dg(item.target);
                dg3(item.source);
            })
            data.links.map((link) => {
                link['lineStyle'] = {
                    opacity: .1
                }
                if (link.gx) {
                    link['lineStyle'] = {
                        opacity: 1
                    }
                    let nodes = data.links.filter((link_) => link_.source == link.target)
                    activeNode.push(...nodes)
                }
            })
        } else {
            dg(eventParam.data.target);
            dg2(eventParam.data.source, eventParam.data.target);
            data.links.map((link) => {
                link['lineStyle'] = {
                    opacity: .1
                }
                if (link.gx) {
                    link['lineStyle'] = {
                        opacity: 1
                    }
                    let nodes = data.links.filter((link_) => {
                        if (link_.source == link.target) {
                            return link_;
                        }
                    });
                    activeNode.push(...nodes);
                }
                if (link.source == eventParam.data.source && link.target == eventParam.data.target) {
                    let nodes = data.links.filter((link_) => link_.source == link.target);
                    activeNode.push(...nodes);
                    link['lineStyle'] = {
                        opacity: 1
                    }
                }
            })
        }

        data.nodes.map((node) => {
            let is = activeNode.filter((isNode) => node.name == isNode.source)[0];
            if (is) {
                node['itemStyle'] = {
                    opacity: 1
                }
            }
        })

        myChart.setOption({
            series: [
                {
                    type: 'sankey',
                    data: data.nodes,
                    links: data.links,
                }
            ]
        });

    })
    myChart.on('mouseout', (eventParam) => {
        data.links.forEach((link) => {
            link.gx = 0;
            link.lineStyle = {};
        })
        data.nodes.forEach((node) => {
            node['itemStyle'] = {
                opacity: .2
            }
        })
        myChart.setOption({
            series: [
                {
                    type: 'sankey',
                    data: data.nodes,
                    links: data.links,
                }
            ]
        });
    })
    myChart.hideLoading();
}
onMounted(()=>{
    initChart();
})
</script>

<style lang="less" scoped>
.chart{
    width: 1000px;
    height: 600px;
}
</style>